<template>
	<view class="content">
		<!-- <view class="title" v-if="!noData&&detailInfo[0]">
			<text>{{detailInfo[0].cate_name}}</text>
			<button class="reminder" @click="reminderBu()">一键催单</button>
		</view> -->
		<view v-for="(item, index) in detailInfo" :key="index">
			<view class="project-list">
				<view>区域：{{ item.position_name }}</view>
				<!-- <view>种类：{{item.cate_name}}</view> -->
				<view>商品名称：{{ item.product_name }}</view>
				<view>型号：{{ item.model }}</view>
				<view>品牌：{{ item.brand_name }}</view>
				<view>数量：{{ item.product_qty }}{{item.uom_name}}</view>
				<view>已到货数量：{{ item.send_qty }}{{item.uom_name}}</view>
				<view :style="{ color: item.delay === '2' ? 'red' : '' }">计划到货时间：{{ item.request_order_date }}</view>
				<view class="project-operate">
					<button size="mini" @click="receiveCargo(item.id)">收货</button>
					<button v-if="item.is_check==false" size="mini" @click="playOrder(item.id, item.product_id, item.name, item.position_name)">下单</button>
					<button v-else  v-show="item.measurement_id==''" size="mini"  @click="addMeasure(item.product_name,item.product_id,item.measurement_type,item.id,item.position_id,item.position_name,item.texture)">待复尺</button>
					<button  v-show="item.measurement_id!=''"  size="mini"  @click="addMeasure(item.product_name,item.product_id,item.measurement_type,item.id,item.position_id,item.position_name,item.texture)">已复尺</button>
				</view>
				<image class="project-image" :src="item.imgurl" @error="imageError" @click="previewImage(item.imgurl)"></image>
				<!-- <icon type="warn" size="55rpx" class="warn-icon" v-if="item.delay==='2'" /> -->
			</view>
		</view>
		<view v-if="noData" class="cus-no-data">
			<text class="def-icon">&#xe64b;</text>
			<text>暂 无 数 据 . . .</text>
		</view>
		<uni-fab v-if="!noData && detailInfo[0]" :horizontal="horizontal" :vertical="vertical" menuText="催单" @longpress="fadlongpress" @onlyOne="reminderBu()"></uni-fab>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showDrawer: false, //抽屉组件状态
			detailInfo: {}, //详情信息
			noData: false, //详情列表数据是否为空
			// line: '', //材料页面传进来的参数
			horizontal: 'left',
			vertical: 'bottom',
			stystate:'待复尺'
		};
	},
	onLoad(param) {
		// console.log(param)
		// this.line = JSON.parse(param.line)
		this.getDetailInfo(JSON.parse(param.line));
		uni.setNavigationBarTitle({
			title: param.cate_name
		});
		this.$eventBus.$on('measureComplete', () => {
			this.getDetailInfo(JSON.parse(param.line));
		});
	},
	onUnload() {
		this.$eventBus.$off('measureComplete')
	},
	methods: {
		receiveCargo(id) {
			// 到收货页
			uni.navigateTo({
				url: './materialDetail/receiveCargo?wo_material_id=' + id
			});
		},
		addMeasure(productname,productid,measurement_type,hard_product_id,position_id,position_name,texture) { // 到复尺页
			uni.navigateTo({
				url: '../measure/addMeasure?project_id=' + JSON.stringify(this.project_id)  +'&product_name=' + productname  + '&measurement_type=' + measurement_type  + '&product_id=' + JSON.stringify(productid)  + '&hard_product_id=' + JSON.stringify(hard_product_id)  + '&position_id=' + JSON.stringify(position_id)   + '&position_name=' + position_name   + '&texture=' + texture,
			})
		},
		playOrder(id, product_id, name, position_name) {
			// 到下单页
			uni.navigateTo({
				url: './materialDetail/playOrder?wo_material_id=' + id + '&product_id=' + product_id + '&name=' + name + '&position_name=' + position_name
			});
		},
		fadlongpress() {
			// 悬浮按钮长按
			if (this.vertical === 'top') {
				this.vertical = 'bottom';
			} else {
				this.vertical = 'top';
			}
		},
		//获取详情信息
		getDetailInfo(line) {
			uni.showLoading({
				title: '',
				mask: false
			});
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/get_hard_material_info',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: {
					line
				},
				success: res => {
					uni.hideLoading();
					if (res.data.code === 1) {
						this.detailInfo = res.data.data.info;
						if (res.data.data.info.length === 0) {
							this.noData = true;
						} else {
							this.noData = false;
						}
					
						
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		//一键催单按钮
		reminderBu() {
			uni.showLoading({
				title: '正在催单...',
				mask: false
			});
			uni.request({
				url: this.$store.state.baseUrl + '/lwj/material_remind_delivery',
				method: 'POST',
				header: {
					token: this.$store.state.token
				},
				data: {
					line: this.detailInfo
				},
				success: res => {
					uni.hideLoading();
					if (res.data.code === 1) {
						uni.showToast({
							title: '催单成功',
							mask: false,
							duration: 1500
						});
					}
				},
				fail: () => {
					uni.hideLoading();
					uni.showToast({
						title: '催单失败',
						duration: 1500
					});
				},
				complete: () => {}
			});
		},
		//图片预览
		previewImage(url) {
			//有图片的时候才能让他弹出来
			if (url !== '') {
				const imgList = [url];
				uni.previewImage({
					// current: imgList[i],
					current: 0,
					urls: imgList
				});
			} else {
				uni.showToast({
					title: '暂无图片',
					mask: false,
					duration: 1500,
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style scoped>
.project-list {
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-top: 15rpx;
	margin-left: 15rpx;
	margin-right: 15rpx;
	position: relative;
}

.title {
	background-color: #ffffff;
	text-align: center;
	position: relative;
}

.reminder {
	position: absolute;
	right: 0;
	line-height: 50upx;
	display: inline;
	margin-right: 5upx;
	background-color: #69a0f4;
	color: #ffffff;
	border-radius: 20upx;
	padding: 0 10upx;
	font-size: 28upx;
}

.project-image {
	position: absolute;
	right: 30upx;
	bottom: 100upx;
	width: 200px;
	height: 200px;
	background-color: #eeeeee;
}
.project-operate {
	padding-top: 30upx;
}
.project-operate button {
	margin-left: 20upx;
}
.drawer-content {
	padding: 10upx;
}

.search-button {
	margin-top: 10upx;
}
</style>
